<template>
  <div class="site-infinite-scroll">
    <el-divider style="height: 100%">
      <div class="guessyoulike_tit">
        <p>猜你喜欢</p>
      </div></el-divider
    >
    <div class="infinite">
      <el-scrollbar>
        <div
          class="infinite-list"
          v-infinite-scroll="load"
          infinite-scroll-disabled="disabled"
          style="overflow: auto"
        >
          <div
            class="infinite-list-item-box"
            v-for="item in infiniteItemList"
            :key="item.itemId"
          >
            <!-- 下面a标签可以用<router-link to=""></router-link>替换 -->
            <router-link
              class="infinite-list-item"
              :to="{ path: '/item', query: { id: item.itemId } }"
            >
              <div class="infinite-list-item-img">
                <img :src="item.itemSwiperImgUrl[0].url" alt="" />
              </div>
              <h3 class="infinite-list-item-title">
                {{ item.title }}
              </h3>
              <p class="infinite-list-item-price">
                <span class="infinite-list-item-price-rmb">￥</span
                >{{ item.discountPrice }}
              </p>
            </router-link>
          </div>
          <div class="infinite-list-loading-status">
            <p v-if="loading">加载中...<i class="el-icon-loading"></i></p>
            <p v-if="noMore">没有更多了</p>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
export default {
  name: "SiteInfiniteScroll",
  data() {
    return {
      count: 0,
      loading: false,
      infiniteItemList: [],
    };
  },
  computed: {
    noMore() {
      return this.count >= this.$store.state.items.length / 5;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 1;
        let i = this.count * 5;
        for (let j = this.count * 5 - 5; j < i; j++) {
          this.infiniteItemList.push(this.$store.state.items[j]);
        }
        this.loading = false;
      }, 1000);
    },
  },
};
</script>

<style scoped>
.el-divider--horizontal {
  height: 2px;
  margin: 33px 0;
}
.el-divider {
  background-color: #cccccc;
}
.el-divider__text {
  background-color: #eae8eb;
}
.guessyoulike_tit {
  display: flex;
}
.guessyoulike_tit p {
  font-size: 28px;
  font-weight: 700;
  color: #333;
}

@import url("../../assets/css/home/HomeInfiniteScroll.css");
</style>